<!-- 疫苗 -->
<!-- 疫苗管理 -->
<template>
  <view class="box">
    <uv-navbar 
      class="bold-title" 
      title="疫苗管理" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    
    <view class="content-area">
      <VaccineRecord :records="vaccineRecords"></VaccineRecord>
    </view>
    
    <view class="header">
      <button class="add-button" @click="goToTrace">新增</button>
    </view>
  </view>
</template>

<script setup>
  
  import { ref, onMounted } from 'vue'; // 确保导入 onMounted
  import { useRouter } from 'vue-router';
  import VaccineRecord from '/components/Quarantinehome/Quarantinehome.vue'; // 引入子组件
  import cowImg from '/static/map/cow.png'; // 确保路径正确
  import {getVaccineList} from '@/api/manageRight.js'

const vaccineRecords = ref([]); // 疫苗记录数据
const loading = ref(false);     // 加载状态
const error = ref(null);        // 错误信息

// 获取疫苗列表
const fetchVaccineList = async () => {
  loading.value = true;
  error.value = null;
  
  try {
    // 调用接口获取数据
    const response = await getVaccineList();
    
    if (response.code === 200 && response.data) {
      // 将接口数据转换为组件需要的格式
      vaccineRecords.value = response.data.map(item => ({
        entries: [
          {
            img: cowImg,
            type: '牲畜编号',
            imei: item.F_IMEI || '无编号'
          }
        ],
        details: [
          { label: '疫苗批次号', value: item.F_Batch || '无批次号' },
          { label: '疫苗名称', value: item.F_Title || '无名称' },      
        ],
        operator: item.F_Name || '未知',
        date: item.F_CreateTime ? new Date(item.F_CreateTime).toLocaleDateString() : '无日期'
      }));
    } else {
      error.value = response.message || '获取疫苗列表失败';
    }
  } catch (err) {
    error.value = '网络错误，请稍后重试';
    console.error('获取疫苗列表出错:', err);
  } finally {
    loading.value = false;
  }
};

// 返回按钮点击事件
const leftClick = () => {
  uni.navigateBack();
};

// 前往追踪页面
const goToTrace = () => {
	uni.navigateTo({
			 url: './Vacnr'
		});
};

// 页面加载时获取数据
onMounted(() => {
  fetchVaccineList();
});
 </script>


<style lang="scss" scoped>
 .box {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
 
 .bold-title {
   font-weight: bold;
 }
 
 .content-area {
   background-color: #f3f5f8; // 设置背景为浅灰色
   flex: 1; // 确保内容区域占据剩余空间
   padding: 30rpx;
   overflow: auto; // 确保内容可滚动
 }
 
 .record-container {
   background-color: transparent; // 确保容器背景是透明的，以显示父组件的背景
 }
 
 .header {
   .add-button {
     background-color: #0bcb75;
     color: white;
     border: none;
     border-radius: 8rpx;
     padding: 16rpx;
     width: 100%;
     font-size: 32rpx;
     margin-top: 40rpx;
     position: fixed;
     bottom: 0;
     left: 0;
   }
 }
</style>
